<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 插入和替换元素操作：针对元素增删改操作 
		append()   功能：在匹配元素集合中所有元素的内部末尾插入内容
		prepend()  功能：在匹配元素集合中所有元素的内部开头插入内容
		after
		before
		-->
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			button{
				margin: 5px;
				padding: 10px 15px;
				 cursor: pointer;
			}
			#target{
				border: 1px solid black;
				padding: 10px;
				margin-top: 10px;
				margin-left: 5px;
			}
			.newElement1{
				display: block;
				width: 200px;
				height: 200px;
				background-color: yellow;
				border-radius: 50%;
				background-image: url(../img/勾子之神.jpg);
				background-size: 100%;
				color: transparent;
				
			}
		</style>
	</head>
	<body>
		<button id="appendBtn">内部末尾插入元素</button>
		<button id="appendBtn1">内部开头插入元素</button>
		<button id="appendBtn2">外部后面插入元素</button>
		<button id="appendBtn3">外部前面插入元素</button>
		<button id="removeBtn">删除元素</button>
		<button id="emptyBtn">清空元素</button>
		<button id="replaceBtn">替换元素</button>
		<div id="target">
			<p>目标元素的初始段落</p>
			</div>
		<div id="newElement" style="display: none;">
			<p>插入新元素的初始段落</p>
			</div>
		
		<script>
			// 1.点击 内部末尾插入元素 按钮  文本后面追加新元素中包含内容操作
			$("#appendBtn").click(function(){
				//clone()创建一个元素的副本，副本包含：内部元素以及所有属性和属性值
				var p=$("#newElement").clone();
				//显示出来
				p.css("display","block");
				//将复制出来的副本元素追加给当前元素上
				$("#target").append(p);
			});
			// 2.点击 内部前面插入元素 按钮  文本前面追加新元素中包含内容操作
			$("#appendBtn1").click(function(){			
				var p=$("#newElement").clone();
				p.css("display","block");				
				$("#target").prepend(p);
			});
			// 3.点击 外部末尾插入元素 按钮  后面追加新元素中包含内容操作
			$("#appendBtn2").click(function(){
				var p=$("#newElement").clone();
				p.css("display","block");				
				$("#target").after(p);
			});
			// 4.点击 外部前面插入元素 按钮 生成 圆形 文本后面追加新元素中包含内容操作
			$("#appendBtn3").click(function(){
				$("#newElement").addClass("newElement1");
				var p1=$("#newElement").clone();
				$("#target").before(p1);
			});
			//
			$("#removeBtn").click(function(){
				$("#target").remove();
			});
			//
			$("#emptyBtn").click(function(){
				$("#target").empty();
			});
			//点击替换按钮 页面上目标元素替换为新元素
			$("#replaceBtn").click(function(){
				var o=$("#newElement").clone().css("display","block");
				//替换目标元素
				$("#target").replaceWith(o);
				
			});
		</script>
		
	</body>
</html>